import React, { Component } from 'react';


import "./Classify.scss"

//!引入请求
import { category_list } from "../uilts/apis";
import { category_subcate } from "../uilts/apis";



class Classify extends Component {
    constructor(props) {
        super(props)
        this.state = {
            //!一级分类
            categorylist: [],
            //!二级分类
            shoplist: [],

        }
    }

    componentDidMount() {
        //*分类一级
        category_list().then((ok) => {
            console.log(ok.data.list);
            this.setState(
                this.state.categorylist = ok.data.list
            )
        })
    }

    //*二级分类
    clicklist = (item) => {
        category_subcate({ id: item.id }).then((ok) => {
            console.log(ok.data.subcate.subcategory);
            this.setState(
                this.state.shoplist = ok.data.subcate.subcategory
            )
        })
    }

    render() {
        return (
            <div className='classify'>
                <div className="top">
                    <p>分类</p>
                    <div className="input">
                        <input type="text" placeholder='搜索店铺内商品' />
                    </div>
                </div>

                <div className="center">
                    <div className="left">
                        {
                            this.state.categorylist.map((item, index) => {
                                return (
                                    <div onClick={() => { this.clicklist(item) }} key={index}>{item.name}</div>
                                )
                            })
                        }
                    </div>
                    <div className="right">
                        <div className="top">
                            {
                                // // console.log(1)
                                this.state.shoplist.map((item, index) => {
                                    return (
                                        <>
                                            <span key={index}>{item.name} </span>
                                            <div className="center">
                                                {
                                                    this.state.shoplist[index].subNavs.map((item, index) => {
                                                        return (
                                                            <div className="box" key={index}>
                                                                <img src={item.pic} alt="" />
                                                                <div className="name">
                                                                    {item.name}
                                                                </div>
                                                            </div>
                                                        )
                                                    })
                                                }
                                            </div>
                                        </>

                                    )
                                })
                            }
                        </div>
                    </div>
                </div>



            </div>
        );
    }
}

export default Classify;